<template>
  <div class='container'>
    <el-row style="padding:10px 0">
      <el-col :span="6">【题型】 ： {{this.Detail.questionType}}</el-col>
      <el-col :span="6">【编号】 ： {{this.Detail.id}}</el-col>
      <el-col :span="6">【难度】 ： {{this.Detail.difficulty}}</el-col>
      <el-col :span="6">【标签】 ： {{this.Detail.tags}}</el-col>
    </el-row>
    <el-row style="padding:10px 0">
      <el-col :span="6">【学科】 ： {{this.Detail.subjectName}}</el-col>
      <el-col :span="6">【目录】 ： {{this.Detail.directoryName}}</el-col>
      <el-col :span="6">【方向】 ： {{this.Detail.direction}}</el-col>
    </el-row>
    <hr/>
    【题干】：
    <div style="color: blue;" v-html="this.Detail.question"></div>
    <div v-if="this.Detail.questionType === '单选' || this.Detail.questionType === '多选'">
      <div style="padding-bottom: 5px;">{{this.Detail.questionType === '单选' ? '单选' : '多选'}} 选项：（以下选中的选项为正确答案）</div>
      <div style="padding: 8px 0px;" v-for="item in Detail.options" :key="item.id"><el-checkbox :label="item.code + '. ' + item.title" :checked="!!item.isRight"></el-checkbox></div>
    </div>
     <hr/>
     【参考答案】：<el-button type="danger" @click="open">视频答案预览</el-button>
     <div v-if="isOpen"><video :src="Detail.videoURL" autoplay muted controls="controls" image.png style="width:400px"></video></div>
     <hr/>

     <div v-html="'【答案解析】：'+ this.Detail.answer" class="pinjie"></div>
     <hr/>
     <div>【题目备注】：{{this.Detail.remarks}}</div>
  <div slot="footer" class="dialog-footer" style="text-align: right;">
    <el-button @click="guanbi" type="primary">关闭</el-button>
  </div>

  </div>
</template>

<script>
export default {
  props: {
    Detail: { type: Object },
    closeDialog: { type: Function }
  },
  data () {
    return {
      // 控制视频是否出现
      isOpen: false
    }
  },
  methods: {
    open () {
      this.isOpen = true
    },
    close () {
      console.log(1)
      this.isOpen = false
    },
    guanbi () {
      this.closeDialog()
      this.isOpen = false
    }
  }

}
</script>

<style scoped lang='less'>
::v-deep .pinjie{
  p{
    display: inline;
  }
}
::v-deep .el-dialog__body{
  padding: 39px 20px ;
}
</style>
